<template>
  <div class="app-container flex column">
    <div class="flex align-center" style="position: relative">
      <top-title :policeView="true" :cusString="cusString"></top-title>
      <div class="goback" @click="goback">返回</div>
    </div>
    <div class="content-wrap f1 flex column">
      <!-- 搜索栏 -->
      <div class="search-group">
        <div class="input-wrap">
          <div class="label">机关名称:</div>
          <div class="input-item">
            <a-tree-select
              style="width: 100%"
              :treeData="treeData"
              tree-default-expand-all
              placeholder="请选择机关"
              v-model="queryParam.policeAgencyId"
              @change="handelChangeSelet"
              :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
              :replaceFields="{ label: 'policeAgencyName', key: 'id', value: 'id' }"
            />
          </div>
        </div>

        <div class="btn-wrap">
          <a-button class="searchBtn" @click="searchQuery()" type="primary"> 搜索 </a-button>
          <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
        </div>

        <div class="btn-group">
          <!-- @click="handleExportXls(`${cusString}`)" -->
          <a-button
            class="exportBtn"
            type="primary"
            @click="
              handleExportXls(`${cusString}`, {
                policeAgencyId: queryParam.policeAgencyId,
                industryInformationIdAndType: queryParam.industryInformationIdAndType,
              })
            "
          >
            导出Excel
          </a-button>
        </div>
      </div>

      <div class="table-wrap f1">
        <!-- :key="cusString"
          :defaultExpandedRowKeys="defaultExpandedRowKeys"
          :defaultExpandAllRows="true" -->
        <a-table
          bordered
          rowKey="id"
          id="a-table"
          class="tableList"
          :columns="columns"
          :pagination="false"
          :dataSource="dataSource"
          :expandedRowKeys="expandedRowKeys"
          @expandedRowsChange="handleExpandedRowsChange"
        >
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import topTitle from '@/components/topTitle'
import startEndTime from '@/components/startEndTime'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage'
import { getOneFlagTreeList } from '@/api/api'
export default {
  name: 'policeInspector',
  components: { topTitle, startEndTime },
  mixins: [JeecgListMixin],
  data() {
    return {
      cusString: '',
      url: {
        list: '/company/message_tube/find_company_tube_status_list',
        exportXlsUrl: '/company/message_tube/find_company_tube_status_list/export',
      },
      treeData: [],
      disableMixinCreated: true,
      expandedRowKeys: [],
      columns: [
        {
          title: '菜单名称',
          dataIndex: 'name',
          ellipsis: true,
          // align: 'center',
        },
        {
          title: '企业法人',
          dataIndex: 'companyUserName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '统一社会信用代码',
          ellipsis: true,
          align: 'center',
          dataIndex: 'companyCreditCode',
        },
        {
          title: '企业联系电话',
          ellipsis: true,
          align: 'center',
          dataIndex: 'companyUserMobile',
        },
      ],
    }
  },
  mounted() {
    if (this.$route.query && this.$route.query.constructor === Object) {
      let params = this.$route.query
      this.queryParam = { ...params }
    }

    this.loadData()
    this.loadTree()
  },

  methods: {
    searchReset() {
      this.queryParam = {}
      let params = this.$route.query
      this.queryParam = { ...params }
      this.loadData()
    },

    async loadData() {
      this.expandedRowKeys = []
      let { result } = await getAction(this.url.list, this.queryParam)
      this.dataSource = result
      this.getChildNode(result)
      this.getFirstChildNode(result)

      this.cusString = `${this.getNodeById(this.treeData, this.queryParam.policeAgencyId).policeAgencyName}${
        this.queryParam.title
      }${this.queryParam.type}场所统计名单`
    },

    loadTree() {
      getOneFlagTreeList().then((res) => {
        if (res.code == 200) {
          this.treeData = res.result
        }
      })
    },

    getChildNode(node) {
      for (const item of node) {
        if (item.isChildren) {
          this.expandedRowKeys.push(item.parentId)
          this.getChildNode(item.children)
        }
        if (!item.isChildren) return
      }
    },

    getFirstChildNode(node) {
      for (const item of node) {
        if (item.isChildren) {
          this.getFirstChildNode(item.children)
        }
        if (!item.isChildren) {
          this.expandedRowKeys.push(item.parentId)
        }
        return
      }
    },

    getNodeById(list, id) {
      if (id == '') return { policeAgencyName: '暂无' }
      for (const item of list) {
        if (item.id === id) return item
        if (item.children) {
          const res = this.getNodeById(item.children, id)
          if (res) return res
        }
      }
    },

    handleExpandedRowsChange(expandedRows) {
      this.expandedRowKeys = expandedRows
    },

    handelChangeSelet() {
      this.$forceUpdate()
    },

    goback() {
      this.$router.go(-1)
    },
  },
  destroy() {},
}
</script>

<style scoped lang="less">
.goback {
  width: 60px;
  height: 30px;
  font-size: 16px;
  color: #0e2b48;
  background: #1388ff;
  border-radius: 4px;
  line-height: 30px;
  text-align: center;
  position: absolute;
  right: 0px;
  cursor: pointer;
}

.app-container {
  background: var(--theme-content-bg);
  padding-top: 0;
  padding-bottom: 0;
  .content-wrap {
    background: var(--theme-container-bg);
    overflow: hidden;
    .table-wrap {
      padding: 0 20px;
      overflow: auto;
    }
  }
}
</style>
